<template>
  <div class="fff">
    <!-- <div class="row photo-list">
      <div class="item" v-for="(item, index) in list" :key="index">
        <img :src="item.cover" @click="toDetail(item.detail)"/>
        <div class="mask">
          <div class="row btn">
            <a class="detail" :href="item.detail">查看大图</a>
            <a class="download" :href="item.download" :download="index">
              下载原图
            </a>
          </div>
        </div>
      </div>
    </div> -->
    <div class="row photo-list">
      <div v-for="(items, key) in list" :key="key" class="col">
        <div class="item" v-for="(item, index) in items" :key="index">
          <img :src="item.cover" @click="toDetail(item.detail)"/>
          <div class="mask">
            <div class="row btn">
              <a class="detail" :href="item.detail">查看大图</a>
              <a class="download" :href="item.download" :download="index">
                下载原图
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import photos from '../data/allPhotos'

export default {
  name: 'photoList',
  data() {
    return {
      fliterPhotos: [],
      list: [],
    }
  },
  created() {
    if(this.$route.params.id == 99) {
      this.fliterPhotos = photos.juzhao[this.$route.query.production]
    } else {
      const photosList = [photos.pcPhotos, photos.phonePhotos, photos.headerPhotos, photos.xizhuang, photos.juzhao[0], photos.bqb]
      this.fliterPhotos = photosList[this.$route.params.id]
    }
    const len = this.fliterPhotos.length
    if(document.body.clientWidth > 768) { // pc端，分五列
      let t = parseInt(len/5)  // 
      this.list = [
        this.fliterPhotos.slice(0, t), 
        this.fliterPhotos.slice(t, 2*t), 
        this.fliterPhotos.slice(2*t, 3*t), 
        this.fliterPhotos.slice(3*t, 4*t), 
        this.fliterPhotos.slice(4*t, 5*t)
      ]
      if(len%5 != 0) {
        let r = len%5
        for(let i=0;i<r;i++) {
          this.list[i].push(this.fliterPhotos[5*t + i])
        }
      }
    } else { // 手机端，分两列 
      let i1 = parseInt(len/2)
      if(len%2 != 0) { i1++ }
      this.list = [this.fliterPhotos.slice(0, i1), this.fliterPhotos.slice(i1, len)]
    }
  },
  methods: {
    toDetail(url) {
      window.open(url)
    }
  }
}
</script>

<style>
  .fff {
    width: 100%;
    height: 100%;
    background: #fff;
  }
  .photo-list {
    position: absolute;
    top: 0;
    left: 0;
    flex-wrap: wrap;
    background: #fff;
    width: 100%;
    align-items: flex-start;
  }
  .photo-list .col {
    width: 20%;
  }
  .photo-list img {
    width: 100%;
    /* height: 316px; */
  }
  .photo-list .item {
    width: 99%;
    /* width: auto;
    height: 316px; */
    position: relative;
    /* margin-right: 1px;
    margin-bottom: 1px; */
  }
  .photo-list .mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    z-index: 10;
  }
  .photo-list .mask .btn {
    position: absolute;
    right: 22px;
    bottom: 22px;
  }
  .photo-list .mask img {
    width: 32px;
    height: 32px;
  }
  .photo-list .item:hover .mask {
    display: block;
  }
  .photo-list .mask a {
    color: #fff;
    text-decoration: none;
  }
  .detail {
    margin-right: 18px;
  }
  .photo-list .mask a:hover {
    text-decoration: underline;
  }
  @media screen and (max-width: 768px){
    .photo-list .col {
      width: 50%;
    }
    .fff {
      height: 100%;
    }
    .photo-list {
      height: 100%;
      align-items: flex-start;
      align-content: flex-start;
      justify-content: flex-start;
    }
    .photo-list img {
      width: 100%;
      height: auto;
    }
    .photo-list .col {
      width: 50%;
    }
    .photo-list .item {
      height: auto;
      width: 99%;
      margin: 0;
      /* padding-right: 1px; */
    }
    .photo-list .mask .btn {
      position: absolute;
      bottom: 22px;
      left: 0;
      width: 100%;
      justify-content: center;
    }
  }
</style>

